<template>
    <div v-if="DetailContent">
         <div class="part clear" >
            <p>家园</p>
            <ul class="half">
                <li class="half-content">
                    <span class="txt">房屋等级：</span>
                    <span >{{DetailContent.fwdj}}</span>
                </li >
                <li class="half-content">
                    <span class="txt">房屋风水：</span>
                    <span >{{DetailContent.fwfs}}</span>
                </li>
                <li class="half-content">
                    <span class="txt">房屋环境度：</span>
                    <span >{{DetailContent.fwhjd}}</span>
                </li>
                <li class="half-content">
                    <span class="txt">庭院等级：</span>
                    <span >{{DetailContent.tydj}}</span>
                </li>
            </ul>
        </div>
        <div class="part clear" >
            <p>外观</p>
            <ul class="half">
                <li class="half-content">
                    <span class="txt">身上染色折算彩果数：</span>
                    <span >{{DetailContent.zscg}}</span>
                </li>
                <li class="half-content">
                    <span class="txt">衣橱套数：</span>
                    <span >{{DetailContent.yc}}</span>
                </li>
                <li class="half-content">
                    <span class="txt">衣橱折算彩果总数：</span>
                    <span >{{DetailContent.yc_zscg}}</span>
                </li>
            </ul>
            <ul class="full">
                <li class="full-content">
                    <span class="txt">永久称谓特效：</span>
                    <span >{{DetailContent.yjcwtx}}</span>
                </li>
                <li class="full-content">
                    <span class="txt">永久冒泡框：</span>
                    <span >{{DetailContent.yjmpk}}</span>
                </li>
                <li class="full-content">
                    <span class="txt">永久队标：</span>
                    <span >{{DetailContent.yjdb}}</span>
                </li>
                <li class="full-content">
                    <span class="txt">永久头像框：</span>
                    <span >{{DetailContent.yjtxk}}</span>
                </li>
                <li class="full-content">
                    <span class="txt">永久头饰：</span>
                    <span >{{DetailContent.yjts}}</span>
                </li>
                <li class="full-content">
                    <span class="txt">永久时装：</span>
                    <span >{{DetailContent.yjsz}}</span>
                </li>
                <li class="full-content">
                    <span class="txt">永久足迹：</span>
                    <span >{{DetailContent.yjzj}}</span>
                </li>
            </ul>
            
        </div>
        
    </div>
</template>
<script>
import axios from "axios";
export default {
     data(){
        return{
            DetailContent:{}
        }
    },
    mounted () {   
    var id =this.$route.query.id   
    axios.get("http://81.68.253.206:8081/page/getRoleOther?id="+id
    ).then(res=>{
      
      if(res.data&&res.data.data&&res.data.status){
        this.DetailContent=res.data.data;
      }
    })
    },
    
}
</script>
<style lang="scss" scoped>
.part{
    position: relative;
    width: 100%;
    padding:rem(10) rem(30);
    background-color: #fff;
    margin-bottom: rem(13);
    span{
        font-size: rem(40);
    }

    p{
        height: rem(50);
        line-height: rem(50);
        font-size: rem(40);
        font-weight: 700;;
        margin-left: rem(30);
        margin-bottom: rem(20);;
    }
    p::before{
        content: '';
        overflow: hidden;
        position: absolute;
        top: rem(55);
        left: rem(30);
        width: rem(8);
        height: rem(40);
        line-height: rem(40);
        background-color:#e74e4b;
    }
    .half{
        width: 100%;
        position: relative;
        .half-content{
            width: 50%;
            float: left;
            height: rem(80);
            line-height: rem(80);
            font-size: rem(40);
            .txt{
                color: #888;
            }

        }                
    }
    .full{
         width: 100%;
        position: relative;
        .full-content{
            width: 100%;
            float: left;
            font-size: rem(40);
            line-height: rem(80);
            .txt{
                color: #888;
            }

        }          

    }
    
        
    
    }
    .highlight{
    width: 100%;
    height: rem(60);
    line-height: rem(60);
    .highlight-item{
        display: inline-block;
        padding: 0 rem(15);
        font-size: rem(35);
        color: #ee8381;
        border: 1px solid #f7c9c9;
        border-radius: rem(10);
    }
    }

.clear{clear:both;}

</style>